<template>
  <el-form
    ref="formRef"
    :model="form"
    :rules="rules"
    :label-width="formConfig.labelWidth"
    :inline="formConfig.inline"
    :label-position="formConfig.labelPosition"
    :label-suffix="formConfig.labelSuffix"
    :size="formConfig.size"
    :disabled="formConfig.disabled"
  >
    <div class="form_container">
      <el-row :gutter="formConfig.gutter">
        <el-col :span="24 / formConfig.span" v-for="item in data" :key="item">
          <el-form-item :label="item.label" :prop="item.key" :label-width="item.labelWidth">
            <el-input
              v-if="item.prop === 'input'"
              v-model="form[item.key]"
              :placeholder="item?.placeholder"
              :type="item?.type"
              :disabled="item.disabled"
            />
            <el-select
              v-if="item.prop === 'select'"
              v-model="form[item.key]"
              :placeholder="item?.placeholder"
              :disabled="item.disabled"
            >
              <el-option
                v-for="(option, index) in item.options"
                :key="index"
                :label="option.label"
                :value="option.value"
              />
            </el-select>
            <el-radio-group
              v-if="item.prop === 'radio'"
              v-model="form[item.key]"
              :disabled="item.disabled"
            >
              <el-radio v-for="(option, index) in item.options" :key="index" :label="option.value">
                {{ option.label }}
              </el-radio>
            </el-radio-group>
            <el-switch
              v-if="item.prop === 'switch'"
              v-model="form[item.key]"
              :disabled="item.disabled"
            />
            <el-checkbox-group
              v-if="item.prop === 'checkbox'"
              v-model="form[item.key]"
              :disabled="item.disabled"
            >
              <el-checkbox
                v-for="(option, index) in item.options"
                :key="index"
                :label="option.label"
                :name="option.name"
              />
            </el-checkbox-group>
            <el-input-number
              v-if="item.prop === 'number'"
              v-model="form[item.key]"
              :placeholder="item?.placeholder"
              :controls-position="item?.controlsPosition"
              :min="item?.min"
              :max="item?.max"
              :disabled="item.disabled"
            />
            <el-date-picker
              v-if="item.prop === 'datePicker'"
              v-model="form[item.key]"
              :type="item.type"
              :placeholder="item?.placeholder"
              :disabled-date="item?.disabledDate"
              :shortcuts="item?.shortcuts"
              :format="item?.format"
              :value-format="item?.valueFormat"
              :range-separator="item.rangeSeparator"
              :start-placeholder="item?.startPlaceholder"
              :end-placeholder="item?.endPlaceholder"
            />
            <el-date-picker
              v-if="item.prop === 'timePicker'"
              v-model="form[item.key]"
              :type="item.type"
              :placeholder="item?.placeholder"
              :arrow-control="item?.arrowControl"
            />
            <el-time-select
              v-if="item.prop === 'timeSelect'"
              v-model="form[item.key]"
              :start="item?.start"
              :step="item?.step"
              :end="item?.end"
              :placeholder="item?.placeholder"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <div class="footer">
        <slot name="footer" :formEl="formRef" />
      </div>
    </div>
  </el-form>
</template>

<script setup>
  import { ref, computed, defineProps } from 'vue';

  const formRef = ref();

  const props = defineProps({
    data: {
      type: Array,
      default: () => [],
    },
    form: {
      type: Object,
      default: () => {},
    },
    formConfig: {
      type: Object,
      default: {},
    },
  });

  const rules = computed(() => {
    const buffer = {};
    props.data.forEach(item => {
      if (item.rules) {
        buffer[item.key] = item.rules;
      }
    });
    return buffer;
  });
</script>

<style scoped lang="scss">
  .form_container {
    display: flex;
    flex-direction: column;
    .footer {
      align-self: flex-end;
    }
  }
</style>
